<template>
  <div class="roles">
    <Crumbs :bread="bread"></Crumbs>
    <el-card>
      <!-- 添加角色 -->
      <el-dialog title="添加角色" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="180px">
          <el-form-item label="角色名称" prop="roleName" :rules='[{required:true,message:"请输入角色名称",trigger:"blur"}]'>
            <el-input v-model="form.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc" :rules='[{required:true,message:"请输入角色描述",trigger:"blur"}]'>
            <el-input v-model="form.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="add">确 定</el-button>
            </span>
      </el-dialog>
      <!-- 修改角色 -->
      <el-dialog title="修改用户" :visible.sync="dialogVisible1" width="60%" :before-close="handleClose">
        <el-form ref="form1" :model="form1" label-width="180px">
          <el-form-item label="角色名称" prop="roleName" :rules='[{required:true,message:"请输入角色名称",trigger:"blur"}]'>
            <el-input v-model="form1.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc" :rules='[{required:true,message:"请输入角色描述",trigger:"blur"}]'>
            <el-input v-model="form1.roleDesc"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="edit">确 定</el-button>
            </span>
      </el-dialog>
      <!-- 树形控件 -->
      <el-dialog :visible.sync="dialogVisible2" width="60%" :before-close="handleClose">
         <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        ref='ref'
        default-expand-all
        highlight-current
        current-node-key
        :default-checked-keys="checkKeys"
        :props="defaultProps"
      >
      </el-tree>
       <el-button @click="dialogVisible2 = false">取消</el-button>
      <el-button @click="jurisdiction">确定</el-button>
      </el-dialog>
      <div>
        <el-button type="primary" @click="dialogVisible=true" class="tian">添加角色</el-button>
      </div>
      <el-table :data="tableData" border :stripe="true" style="width: 100%;" :header-cell-style="{
                        textAlign: 'center',
                        height: '40px',
                    }">
        <el-table-column type="expand">
          <template slot-scope="scope">
              <el-row   :class="['border_bottom',index==0?'border_top':'','aa']"
             v-for="(item,index) in scope.row.children" :key="item.id">
              <el-col  :span="5">
                <el-tag closable @close="de(scope.row,item.id)">{{ item.authName }}</el-tag>
              </el-col>
              <el-col :span="19">
                <el-row  
                v-for="(item1,index1) in item.children" :key="index1" 
                :class="[index1==0?'':'border_top','aa']" >
                  <el-col :span="5">
                    <el-tag closable type="success" @close="de(scope.row,item1.id)">{{ item1.authName }}</el-tag>
                  </el-col>
                  <el-col :span="14">
                  <el-tag closable v-for="item2 in item1.children" @close="de(scope.row,item2.id)" :key="item2.id">{{ item2.authName }}</el-tag>
                </el-col>
                </el-row>
              </el-col>
            </el-row>
</template>
        </el-table-column>
        <el-table-column label="#" type="index">
        </el-table-column>
        <el-table-column prop="roleName" label="角色名称">
        </el-table-column>
        <el-table-column prop="roleDesc" label="角色描述">
        </el-table-column>
        <el-table-column label="操作">
<template slot-scope="scope">
  <el-button type="primary" icon="el-icon-edit" size="mini" @click="deit(scope.row.id)">
  </el-button>
  <el-button type="warning" icon="el-icon-s-tools" size="mini" @click="quan(scope.row.id)"></el-button>
  <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.id)"></el-button>
</template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
       </el-card>
    </div>
</template>
<script>
  import Crumbs from '@/components/crumbs.vue'
  // import Pages from '@/components/paging.vue'
  import {
    roles,
    rolesadd,
    delroles,
    huiroles,
    editroles,
    roleszhi,
    roleslist,
    rolesgrant
  } from '../until/http.js'
  export default {
    components: {
      Crumbs
    },
    data() {
      return {
        tableData: [],
        props: [],
        checkKeys:[],
          defaultProps: {
          children: 'children',
          label: 'authName'
        },
        data:[],
        dialogVisible: false,
        dialogVisible1: false,
        dialogVisible2: false,
        roleId:null,
        index1:'',
        index2:"",
        form1: {
          roleName: "",
          roleDesc: ""
        },
        page: {
          query: 0,
          pagenum: 1,
          pagesize: 5
        },
        editId: null,
        form: {
          roleName: "",
          roleDesc: ""
        },
        total: null,
        bread: [{
            id: 1,
            path: "",
            title: "权限管理"
          },
          {
            id: 2,
            path: "",
            title: "角色列表"
          },
        ]
      };
    },
    mounted() {
      this.setlist()
    },
    methods: {
      // 角色列表
      async setlist() {
        const {
          data: res
        } = await roles(this.page)
        this.tableData = res.data
      },
      //关闭弹框
      handleClose() {
        this.dialogVisible = false;
        this.dialogVisible2 = false;
        this.dialogVisible1 = false;
      },
      //   添加角色
      async add() {
        const {
          data: res
        } = await rolesadd(this.form)
        console.log(res)
        if (res.meta.status == 201) {
          this.dialogVisible = false;
          this.setlist()
          this.$message.success(res.meta.msg)
        }
        if (res.meta.status == 400) {
          this.$message.error(res.meta.msg)
        }
        this.form = {}
      },
      //删除指定角色
    async  de(row,rightId) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(async() => {
            var res = await roleszhi(row.id,rightId);
            row.children=res.data.data  
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
        //分配权限
   async jurisdiction(){
  let rids=[...this.$refs.ref.getCheckedKeys(),...this.$refs.ref.getHalfCheckedKeys()].join(',') ;
      let roleId = this.roleId;
      const {data:res}= await rolesgrant(roleId,rids)
      // console.log(res);
      if(res.meta.status == 200) {
        this.setlist()
        this.dialogVisible2=false;
        }
    },
      //分页
      handpagesize(val) {
        console.log(`每页 ${val} 条`);
        this.page.pagesize = val;
        this.setlist();
      },
      handpagenum(val) {
        this.page.pagenum = val;
        this.setlist();
      },
      //权限
     async quan(id) {
        this.dialogVisible2 = true;
      const {data:res}=await roleslist('tree')
      this.data=res.data;
      // this.getKey(row,this.checkKeys)
      this.roleId=id;
        let juese= this.tableData.find((v)=>id == v.id)
      // console.log("juese",JSON.stringify(juese))
    let arr=[];
    for(let v of juese.children){
        for(let v2 of v.children){
            for(let v3 of v2.children){
                arr.push(v3.id)
            }
        }
    }
  // console.log(arr);
  this.checkKeys=arr;
      },
      //删除
      del(id) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(async() => {
            var res = await delroles(id);
            console.log(res);
            this.setlist();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      //回填
      async deit(id) {
        this.dialogVisible1 = true
        const {
          data: res
        } = await huiroles(id)
        console.log(res)
        // console.log(type)
        this.form1.roleName = res.data.roleName
        this.form1.roleDesc = res.data.roleDesc
        this.editId = res.data.roleId
      },
      //修改
      async edit() {
        var obj = {
          id: this.editId,
          roleName: this.form1.roleName,
          roleDesc: this.form1.roleDesc
        }
        const {
          data: res
        } = await editroles(obj)
        if (res.meta.status == 200) {
          this.dialogVisible1 = false;
          this.setlist()
          this.$message.success(res.meta.msg);
        } else {
          this.$message.error(res.meta.msg)
        }
      },
      loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([{
            name: 'region'
          }]);
        }
        if (node.level > 1) return resolve([]);
        setTimeout(() => {
          const data = [{
            name: 'leaf',
            leaf: true
          }, {
            name: 'zone'
          }];
          resolve(data);
        }, 500);
      }
    }
  
  };
</script>
<style scoped>
  .el-card {
    position: relative;
  }
  .tian {
    position: absolute;
    top: 20px;
    left: 30px;
    z-index: 9999;
  }
  .el-table {
    margin-top: 50px;
  }
  .drop-down {
    width: 100%;
    margin: 20px 0;
    padding: 0 0 0 50px;
    display: flex;
    flex-direction: row;
  }
  .left {
    width: 130px;
  }
  .right{
    flex: 1;
    /* background: red; */
    display: flex;
  }
  .right_l{
  width: 100px;
  background: #0000;
  }
  .right_r{
    flex: 1;
    background: #0000;
  }
   .el-tag{
    margin-left: 10px; 
    margin-top: 10px;
  }
.el-row{
  display: flex;
  align-items: center;

}
.aa{
  width: 90%;
  margin: 0 auto;
}
.border_buttom{
 margin-bottom: 5px;
  border-bottom: 1px solid #ebeef5 ;
}
.border_top{
  margin-top: 10px;
  border-top: 1px solid #ebeef5 ;
}
</style>